<template>
  <div>
    <el-select
      clearable
      placeholder="请选择分类"
      :modelValue="modelValue"
      @change="onChange"
      filterable
      :disabled="handle()"
    >
      <el-option
        :key="item.categoryId"
        :value="item.categoryId"
        :label="item.categoryName"
        v-for="item in categoryList"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup>
import { watch, ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["update:modelValue", "change"]);
const props = defineProps({
  modelValue: {
    type: Number,
  },
  type: {
    type: Number,
  },
  bankId: {
    type: Number,
  },
});
watch(
  () => props.bankId,
  (newValue, oldValue) => {
    if (oldValue != newValue) {
      emit("change");
      loadCategory();
    }
  },
  { deep: true, immediate: false }
);
const handle = () => {
  // 0代表新增操作，1代表搜索操作
  if (props.type == 0) return 0;
  else if (props.type == 1)
    return props.bankId == null || props.bankId == "" ? 1 : 0;
};
const api = {
  loadCategory: "/category/loadAllCategory4Select",
};
const categoryList = ref([]);
const loadCategory = async () => {
  let result = await proxy.Request({
    url: api.loadCategory,
    params: {
      type: props.type,
      bankId: props.bankId,
    },
  });
  if (!result) {
    return;
  }
  categoryList.value = result.data;
};
const onChange = (e) => {
  emit("update:modelValue", e);
  emit("change");
};
</script>

<style lang="scss" scoped>
</style>
